<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>employee管理</title>
</head>
	<style>
		table{
			width: 400px;
			border: 1px dashed deepskyblue;
			box-shadow: 5px 5px bisque;
			text-align: center;
			
		}
	
		#userDiv{
			width: 400px;
			margin: 0px auto;
		}
		
		input[type=text]{
			width: 70px;
			height: 18px;
		}
	</style>
<body>
<div id="userDiv">
		<table id="userTable" border="1px"  cellpadding="0" cellspacing="0">
			<tr class="dontRemove">
				<td colspan="8">
					<input type="button" id="myadd" value="添加" />
					<input type="button" id="mydel" value="删除" />
					<input type="button" id="myupdata" value="修改" />
					<input type="button" id="mysava" value="保存" />
				    <input type="text" id="myqueryText"  />
					<input type="button" id="myquery" value="查询" />
				
				</td>
			</tr>
			<tr class="dontRemove">
				<td><input type="checkbox" /></td>
				<td>ID</td>
				<td>电话</td>
				<td>密码</td>
				<td>名字</td>
				<td>薪水</td>
				<td>入职时间</td>
				<td>部门</td>
			</tr>
			
			<!--<tr>
				<td colspan="4">
					<img src="img/shouye.png" id="shouye"/>
					<img src="img/uppage.png" id="uppage"/>
					<img src="img/nextpage.png" id="nextpage"/>
					<img src="img/moye.png" id="moye"/>
				</td>
			</tr>-->
		</table>
		
		<!-- 添加的表格 -->
		<table id="other" >
			
		</table>
		
		</div>

</body>

<!-- http://localhost:8090/super-base-ssm/employee/employeelist.jsp -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.4.js" ></script>
<script>


	//查询添加的提交按钮（新添加的按钮）
	$('#qx').live('click',function(){
		window.location.reload();
	});
	
	
	//查询按钮
	$('#myquery').click(function(){
		
		var keyword=$('#myqueryText').val();
		
		$.ajax({
			'url':'${pageContext.request.contextPath}/employee/myquery',
			'data':{
				'id':keyword,
			},
			'type':'post',
			'dataType':'json',
			'success':function(msg){
	//			{"mycounter":1,"code":200}  bankEntity
				console.log(msg.code);
				
				if(msg.code==200 ){
					
				/* 	'id':aid,
					'phone':aphone,
					'passwode':apasswode,
					'username':ausername,
					'salary':asalary,
					'beginDate':abeginDate,
					'departmentName':adepartmentName, */
					
					var id=msg.entity.id;
					var phone=msg.entity.phone;
					var passwode=msg.entity.passwode;
					var username=msg.entity.username;
					var salary=msg.entity.salary;
					var beginDate=msg.entity.beginDate;
					var departmentName=msg.entity.departmentName;
					
					//1逻辑思路 在table插入1个tr
					var td01= $("<td>"+id+"</td>");
					var td02= $("<td>"+phone+"</td>");
					var td03= $("<td>"+passwode+"</td>");
					var td04= $("<td>"+username+"</td>");
					var td05= $("<td>"+salary+"</td>");
					var td06= $("<td>"+beginDate+"</td>");
					var td07= $("<td>"+departmentName+"</td>");
					
					//2添加一个确定按钮
					var td08=$('<td> <input type="button" id="qx" value="确定" /></td>');
					
					//3生成一个tr,把td插到tr中
					var tr01= $('<tr id="chax"></tr>');
					//4先添加的在前面
					
					tr01.append(td01);
					tr01.append(td02);
					tr01.append(td03);
					tr01.append(td04);
					tr01.append(td05);
					tr01.append(td06);
					tr01.append(td07);
					tr01.append(td08);
					
					//5把tr插到table中
					$('#other').append(tr01);
					//分页
					
					
				}else{
					alert("没有查询到记录");
				}
			}
		});
		
	});


	//总菜单修改按钮的提交的按钮
	$('#mysava').click(function(){
		
		var aid=$('#a1').val();
		var aphone=$('#a2').val();
		var apasswode=$('#a3').val();
		var ausername=$('#a4').val();
		var asalary=$('#a5').val();
		var abeginDate=$('#a6').val();
		var adepartmentName=$('#a7').val();
		
		
		$.ajax({
			'url':'${pageContext.request.contextPath}/employee/myupdate',
			'data':{
				
				'id':aid,
				'phone':aphone,
				'passwode':apasswode,
				'username':ausername,
				'salary':asalary,
				'beginDate':abeginDate,
				'departmentName':adepartmentName,
			},
			'type':'post',
			'dataType':'json',
			'success':function(msg){
	//			{"mycounter":1,"code":200}
				console.log(msg.code);
				
				$('.addtr').remove();
				
				if(msg.code==200 ){
					
					RemoveTr();
					//调用分页
					pageWith(currentPage);
					alert("修改成功");
				}else{
					alert("修改失败");
				}
			}
		});
	});
	

	//总菜单修改按钮
	$('#myupdata').click(function(){
		
		var xx=$('input:checked');
		if(xx.length>0){
			//生成表格
			//1逻辑思路 在table插入1个tr
			var td01= $('<td><input type="text" id="a1" hidden="hidden"/></td>'); 
			var td02= $('<td>电话:<input type="text" id="a2" /></td>');
			var td03= $('<td>密码:<input type="text" id="a3" /></td>');
			var td04= $('<td>名字:<input type="text" id="a4" /></td>');
			var td05= $('<td>薪水:<input type="text" id="a5" /></td>');
			var td06= $('<td>入职时间:<input type="text" id="a6" /></td>');
			var td07= $('<td>部门:<input type="text" id="a7" /></td>');
			/* var td04=$('<td> <input type="button" id="tijiao" value="提交" /></td>'); */
			
			//2添加一个复选框
			/*var td04= $('<td><input type="checkbox"/></td>');*/
			
			//3生成一个tr,把td插到tr中
			var tr01= $("<tr class='addtr'></tr>");
			//4先添加的在前面
			/*tr01.append(td04);*/
			
			tr01.append(td01); 
			tr01.append(td02);
			tr01.append(td03);
			tr01.append(td04);
			tr01.append(td05);
			tr01.append(td06);
			tr01.append(td07);
			/* tr01.append(td04); */
			
			//5把tr插到table中
			$('#other').prepend(tr01);
		
			
			var $checkeds=$('input:checked').parents('tr');
			/* 储户id */
			var aid=$checkeds[0].childNodes[1].innerHTML;
			/* 储户的姓名 */
			var aphone=$checkeds[0].childNodes[2].innerHTML;
			/* 储户的账号 */
			var apasswode=$checkeds[0].childNodes[3].innerHTML;
			/* 余额 */
			var ausername=$checkeds[0].childNodes[4].innerHTML;
			/* 银行 */
			var asalary=$checkeds[0].childNodes[5].innerHTML;
			/* 银行 */
			var abeginDate=$checkeds[0].childNodes[6].innerHTML;
			/* 银行 */
			var adepartmentName=$checkeds[0].childNodes[7].innerHTML;
			
			
			$('#a1').val(aid);
			$('#a2').val(aphone);
			$('#a3').val(apasswode);
			$('#a4').val(ausername);
			$('#a5').val(asalary);
			$('#a6').val(abeginDate);
			$('#a7').val(adepartmentName);
		
			}
		});
	


	/**
	 * 删除
	 */
	$('#mydel').click(function(){
		
	//	var a= $('input:checked').size();
	//	console.log(a);
		//获得 单个id  
	//	var b= $('input:checked').parents('td').next().text();
		
		//选中多个的时候,将选中的id封装在str
		var str='';
		var $checkeds=$('input:checked').parents('td').next();
		
			//将选中的元素封装在一个字符串中
			$checkeds.each(function(i,data){
			console.log(data.textContent);
			
			//最后个不加‘，’
			if($checkeds.length-1==i){
				str=str+data.textContent;
			}else{
				str=str+data.textContent+',';
			}
		});
		console.log(str);
		
		$.ajax({
			'url':'${pageContext.request.contextPath}/employee/mydel',
			'data':{
				'idStr':str,
			},
			'type':'post',
			'dataType':'json',
			'success':function(msg){
	//			{"mycounter":1,"code":200}
				console.log(msg.code);
				var a= msg.mycounter;
	//			var b= msg.code.value;
				
				
				if(msg.code==200){
					
					RemoveTr();
					//调分页函数，刷新
					pageWith(currentPage);
					alert("成功删除"+msg.mycounter+"条数据");
				}else{
					alert("删除失败");
				}
			},
		});
		
		
	});
		
	
	
		
	/**
	 * 插入下一页的之前清空之前的数据
	 */
	function RemoveTr(){
		//先清空之前的数据
		$('tr:not(.dontRemove)').remove();
	}



	var currentPage=1;
	var pageSide=4;
	var acount=0;
	
	//1.进入页面加载第一页
	$(function(){
		pageWith(currentPage);
	});
	
	//2.点击分页按钮
	//2.1下一页
	$('#nextpage').live('click',function(){
		
		//如果当前页面小于总页数，可以按下一页
		if(currentPage<acount){
			//先清空之前的数据
	//		$('tr:not(.dontRemove)').remove();
			RemoveTr();
			
			//获得当前的'currentPage':,'pageSide':, 向数据库查询
			currentPage=currentPage+1;
			pageWith(currentPage);
		}else{
			alert("已经是末页");
		}
		
	});
	
	//2.2上一页
	$('#uppage').live('click',function(){
		
		//如果当前页面小于总页数，可以按下一页
		if(currentPage>1){
			//先清空之前的数据
	//		$('tr:not(.dontRemove)').remove();
			RemoveTr();
			
			//获得当前的'currentPage':,'pageSide':, 向数据库查询
			currentPage=currentPage-1;
			pageWith(currentPage);
		}else{
			alert("已经是首页");
		}
		
	});
	//2.3首页
	$('#shouye').live('click',function(){
		
		//如果当前页面小于总页数，可以按下一页
		
			//先清空之前的数据
	//		$('tr:not(.dontRemove)').remove();
			RemoveTr();
			
			//获得当前的'currentPage':,'pageSide':, 向数据库查询
			currentPage=1;
			pageWith(currentPage);
		
		
	});
	
	//2.4末页
	/**
	 * 末页按钮
	 */
	$('#moye').live('click',function(){
		
		//如果当前页面小于总页数，可以按下一页
		
			//先清空之前的数据
	//		$('tr:not(.dontRemove)').remove();
			RemoveTr();
			
			//获得当前的'currentPage':,'pageSide':, 向数据库查询
			currentPage=acount;
			pageWith(currentPage);
		
	});
	
	
	
	/**
	 * 分页函数  
	 * @param  currentP  当前的页数  
	 */
	function pageWith(currentP){
	
		var url='${pageContext.request.contextPath}/employee/findPage2';
		$.ajax({
			'type':'post',
			'url':url,
			'data':{
				'pageIndex':currentP,
				'pageSize':pageSide,
			},
			'success':function(jsonData){
				//fingWithPage":[{"id":1001,"name":"吴荣来","password":"15213486dwdw32165165"}
				console.log(jsonData);
				acount=jsonData.yeshu;
				
				$(jsonData.list).each(function(i,data){
					
					console.log(data);
					
					
					var id=data.id;
					var phone=data.phone;
					var passwode=data.passwode;
					var username=data.username;
					var salary=data.salary;
					var beginDate=data.beginDate;
					var departmentName=data.departmentName;
					
					
					//1逻辑思路 在table插入1个tr
					var td01= $("<td>"+id+"</td>");
					var td02= $("<td>"+phone+"</td>");
					var td03= $("<td>"+passwode+"</td>");
					var td05= $("<td>"+username+"</td>");
					var td06= $("<td>"+salary+"</td>");
					var td07= $("<td>"+beginDate+"</td>");
					var td08= $("<td>"+departmentName+"</td>");
					
					//2添加一个复选框
					var td04= $('<td><input type="checkbox"/></td>');
					
					//3生成一个tr,把td插到tr中
					var tr01= $("<tr></tr>");
					//4先添加的在前面
					tr01.append(td04);
					
					tr01.append(td01);
					tr01.append(td02);
					tr01.append(td03);
					tr01.append(td05);
					tr01.append(td06);
					tr01.append(td07);
					tr01.append(td08);
					
					//5把tr插到table中
					$('#userTable').append(tr01);
					//分页
			});
			
			//添加分页行   在返调函数里面
			var $tdpage=$('<td colspan="8"><img src="${pageContext.request.contextPath}/img/shouye.png" id="shouye"/><img src="${pageContext.request.contextPath}/img/uppage.png" id="uppage"/><img src="${pageContext.request.contextPath}/img/nextpage.png" id="nextpage"/><img src="${pageContext.request.contextPath}/img/moye.png" id="moye"/></td>');
			
			var $trpage=$('<tr class=".dontRemove"></tr>');
			//分页行添加到到table上
			$trpage.append($tdpage);
			$('#userTable').append($trpage);
		},
		'dataType':'json'
		});
	}
</script>
</html>